<template>
  <div class="login">
    <div class="login-logo">
      <image src="@/static/wczd/wczd-logo.png"></image>
    </div>
    <div class="login-cont">
      <div class="title">
        <div>欢迎登录</div>
        <div style="font-size: 35upx;font-weight: bold">安全生产数字化智能管控平台</div>
      </div>
      <div class="content">
        <uni-forms :modelValue="formData" label-position="top" ref="form" :rules='rules'>
          <uni-forms-item label="手机号：" label-width='160' name="phone">
            <uni-easyinput type="text" v-model="formData.phone" placeholder="请填写手机号" />
          </uni-forms-item>
          <uni-forms-item label="验证码：" name="captchaCode">
            <uni-easyinput type="number" style="width: 63%" v-model="formData.captchaCode" placeholder="请填写验证码" />
            <div class="login-code">
                <div v-if="!codeFlag" class="code-btn" @click="getPhoneVerifyCode()">获取验证码</div>
          		<div v-else class="code-btn">{{second+'s'}}</div>
            </div>
          </uni-forms-item>
          <button :disabled="loading" :loading="loading" class="unibtn" type="primary" @click="submit">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </button>
          <!-- <div class="footer">点击登录，即表示您同意<a>《用户协议》</a></div> -->
        </uni-forms>
      </div>
    </div>
  </div>
</template>

<script>
import UniForms from '@/components/uni-forms/uni-forms.vue'
import UniFormsItem from '@/components/uni-forms-item/uni-forms-item.vue'
import UniEasyinput from '@/components/uni-easyinput/uni-easyinput.vue'
import { getCodeImg, login, getRSAKey,getPhoneVerifyCode } from '@/api/login'
import { removeToken, getToken } from '@/utils/auth'
import JSEncrypt from '@/utils/jsencrypt'
let timer = null

export default {
  name: 'login',
  components: { UniForms, UniFormsItem, UniEasyinput },
  data () {
    return {
			codeFlag: false,
			second: 60,
      formData: {
        phone: '',
        captchaCode: '',
      },
			publicKey: '',
      loading: false,
      rules: {
        phone: {
          rules: [{ required: true, errorMessage: '手机号不能为空', }]
        },
        captchaCode: {
          rules: [{ required: true, errorMessage: '验证码不能为空', }]
        }
      }
    }
  },
  computed: {},
  onLoad () {
    removeToken()
    if (getToken()) {
      uni.reLaunch({
        url: '/pages/home/home'
      });
    } else {
    }
  },
  mounted () { 
		getRSAKey().then(res => {
		  this.publicKey = res.msg
		})
	},
  watch: {},
  methods: {
    getPhoneVerifyCode () {
			if(!this.formData.phone){
				uni.showToast({
				  icon: 'none',
				  title: '请输入手机号',
				  duration: 2000,
				});
				return;
			}
			getPhoneVerifyCode({phone: this.formData.phone}).then(res=>{
				this.codeFlag = true
				this.second = 60
				timer = setInterval(()=>{
					this.second--
					if(this.second===0){
						this.codeFlag = false
						clearInterval(timer)
					}
				},1000)
			})
    },
    reset () {
      this.formData = {
        phone: '',
        captchaCode: '',
      }
    },

    // 提交
    submit () {
      this.loading = true
      var crypt = new JSEncrypt()
      crypt.setPublicKey(this.publicKey)
      var phone = crypt.encrypt(this.formData.phone)
      var captchaCode = crypt.encrypt(this.formData.captchaCode)
			var obj = {phone,captchaCode}
      this.$refs.form.validate().then(res => {
        this.$store
          .dispatch('loginByPhone', obj)
          .then(() => {
            uni.showToast({
              icon: 'none',
              title: '登录成功',
              duration: 2000,
            });
            setTimeout(() => {
              uni.reLaunch({
                url: '/pages/home/home'
              });
            }, 1000);
          })
          .catch(error => {
            this.loading = false
          })
      }).catch(err => {
        this.loading = false
        uni.showToast({
          icon: 'none',
          title: err[0].errorMessage,
          duration: 2000,
        });
      })
    }
  },
}
</script>

<style scoped lang="scss">
.login {
  height: 100%;
  background: url("@/static/wczd/login-bk.png") no-repeat;
  background-size: 100% 40%;
  background-color: #f1f4f6;
  display: flex;
  flex-direction: column;
  align-items: center;
  .login-logo {
    height: 30%;
    display: flex;
    align-items: center;
    > image {
      width: 200upx;
      height: 200upx;
    }
  }
  .login-cont {
    width: 80%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 3vh 40upx 3vh 40upx;
    .unibtn {
      margin-top: 40upx;
    }
    .content {
      padding: 30upx 0 0 0;
      .footer {
        color: #75787b;
        padding: 20upx;
        text-align: center;
        font-size: 14upx;
      }
    }
  }
}
.login-code {
  .login-code-img {
    height: 60upx;
    width: 160upx;
    vertical-align: middle;
    > image {
      width: 160upx;
      height: 60upx;
    }
  }
}

/deep/.uni-icons.content-clear-icon{
	display: none;
}
</style>
